<template>
  <section class="common">
    <p class="common-title">访问管控案例</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <img :src="item.img" class="img" />
        <div>
          <p class="title" v-if="item.title">{{item.title}}</p>
          <p>{{item.text1}}</p>
          <p v-if="item.text2">{{item.text2}}</p>
        </div>
      </li>
    </ul>
  </section>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const list = reactive([
  {
    img: new URL(
      '../../../assets/images/case/Frame-276-(2).jpg',
      import.meta.url
    ).href,
    title: '访问管控',
    text1: '为了进行访问管控导入虹膜识别系统',
    text2: '从开始至今， 这是实现持续发展的艾瑞斯历史',
  },
  {
    img: new URL(
      '../../../assets/images/case/Frame-277-(1).jpg',
      import.meta.url
    ).href,
    title: '友利银行',
    text1: '为友利银行提供虹膜识别算法及产品开发服务',
    text2: '进行数据库访问管控生物（虹膜）识别系统相关的构建项目',
  },
  {
    img: new URL('../../../assets/images/case/Group199.png', import.meta.url)
      .href,
    text1:
      '通过可代替OTP的生物（虹膜）识别系统，加强安保和便利化的艾瑞斯IRIS-W',
  },
  {
    img: new URL('../../../assets/images/case/Group198.png', import.meta.url)
      .href,
    text1:
      '友利银行在进行客户信息等重要的数据库访问时，为加强内部安保和方便员工使用，',
    text2:
      '需将现存的移动OTP2次识别方式更换为生物（虹膜）识别系统。（株）艾瑞斯开发并提供了虹膜算法和产品。',
  },
])
</script>

<style lang="scss" scoped>
@import './common.scss';
</style>